<?php
$activeSpace = Blyn::app()->getActiveSpace();
$wxMenuControl = new BUIWXMenu($activeSpace);
$menuRoot = $wxMenuControl->getRoot();
$firstLevelMenus = $menuRoot->getChildren();
?>
<script type="text/javascript">
    $(function() {
        $(".operation").click(function() {
            $(".operation_selected").removeClass("operation_selected");
            $(this).addClass("operation_selected");
        })
    });
    function collapse(thisElem) {
            var children = $(thisElem).parent('li.parent_li').find(' > ul > li');
            if (children.is(":visible")) {
                children.hide('fast');
                $(thisElem).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
            } else {
                children.show('fast');
                $(thisElem).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
            }
        }
    function SelectMenuType() {
        var MenuTypeList = document.getElementById("MenuTypeList");
        var content = MenuTypeList.options[MenuTypeList.selectedIndex].value;
        if (content == "0")
        {
            document.getElementById("textarea").style.display = '';
            document.getElementById("otherLink").style.display = 'none';
        }
        if (content == "1")
        {
            document.getElementById("textarea").style.display = 'none';
            document.getElementById("otherLink").style.display = '';
        }
    }
    function del(thisLi) {
        if (confirm("确认删除此菜单项？")) {
            $(thisLi).remove();
            $("#info-panel>h4").html("菜单删除成功");
            $("#menu-form").css("display","none");
            $("#info-panel").css("display","block");
        }
    }

    /*
     * 这里给每个菜单编了号：
     * 0
     * |——0-0
     * |    |——0-0-0
     * |    |——0-0-1
     * |
     * |——0-1
     *      |——0-1-0
     *      |——0-1-1
     */
    function AddMenu(parentLi) {
        var childrenCount = $(parentLi).children("ul").children("li").length;
        if($(parentLi).attr("id") == "menu-root") {
            //要添加一级菜单
            if(childrenCount >= 3) {
                alert("根菜单最多只能添加三个！");
            } else {
                $("#index").val("0-" + childrenCount);
                $("#info-panel").css("display","none");
                $("#menu-form").css("display","block");
            }
        } else {
            //要添加二级菜单
            if(childrenCount >= 5) {
                alert("微信子菜单最多只能添加五个！");
            } else {
                var parentIndex = $(parentLi).index();
                var index = "0-" + parentIndex + "-" + childrenCount;
                $("#index").val(index);
                $("#info-panel").css("display","none");
                $("#menu-form").css("display","block");
            }
        }
        $("#menu-name").val("");
    }
    function sure() {
        var operationId = $(".operation_selected").attr("id");
        var url = $(".operation_selected").attr("url");
        if(!operationId) {
            operationId = "";
        } else {
            var arr = operationId.split("-");
            operationId = arr[1];
        }
        var menuName = $("#menu-name").val();
        var index = $("#index").val();
        var arr = index.split("-");
        switch(arr.length) {
            case 2:
                //要保存的是根菜单
                var parentUl = $("#menu-root>ul");
                var sibbingCount = $(parentUl).children("li").length;
                if(parseInt(arr[1]) >= sibbingCount) {
                    //添加新菜单
                    $(parentUl).append("<li myurl='"+url+"' operationId='"+operationId+"' class='parent_li'><span title='Collapse this branch'  onclick='collapse(this);'><i class='icon-minus-sign'></i> <font>"+menuName+"</font></span><a class='treeMenuEdit'  href='javascript:void(0);' onclick='EditMenu(this.parentNode);' title='编辑'></a><a  class='treeMenuDel' href='javascript:void(0);' onclick='del(this.parentNode);' title='删除'></a><a  class='treeMenuAdd'  href='javascript:void(0);' onclick='AddMenu(this.parentNode);' title='添加'></a><ul></ul></li>");
                } else {
                    //修改原有菜单
                    var thisLi = $(parentUl).children("li").eq(parseInt(arr[1]));
                    $(thisLi).children("span").children("font").text(menuName);
                    $(thisLi).attr("operationId",operationId);
                }
                $("#info-panel>h4").html("菜单保存成功");
                break;
            case 3:
                //要保存的是子菜单
                var parentUl = $("#menu-root>ul>li").eq(parseInt(arr[1])).children("ul");
                var sibbingCount = $(parentUl).children("li").length;
                if(parseInt(arr[2]) >= sibbingCount) {
                    //添加新菜单
                    $(parentUl).append("<li  myurl='"+url+"' operationId='"+operationId+"'><span><i class='icon-leaf'></i> <font>"+menuName+"</font></span><a class='treeMenuEdit'  href='javascript:void(0);' onclick='EditMenu(this.parentNode);' title='编辑'></a><a  class='treeMenuDel' href='javascript:void(0);' onclick='del(this.parentNode);' title='删除'></a><ul></ul></li>");
                } else {
                    //修改原有菜单
                    var thisLi = $(parentUl).children("li").eq(parseInt(arr[2]));
                    $(thisLi).children("span").children("font").text(menuName);
                    $(thisLi).attr("operationId",operationId);
                }
                $("#info-panel>h4").html("菜单保存成功");
                break;
            default:
                break;
        }
        $("#menu-form").css("display","none");
        $("#info-panel").css("display","block");
    }


    function EditMenu(thisLi) {
        var menuName = $(thisLi).children("span").children("font").text();
        var operationId = $(thisLi).attr("operationId");
        var parentLi = $(thisLi).parent("ul").parent("li");
        if($(parentLi).attr("id") == "menu-root") {
            //thisLi是一级菜单
            var index = "0-" + $(thisLi).index();
        } else {
            //thisLi是二级菜单
            var parentIndex = $(parentLi).index();
            var index = "0-" + parentIndex + "-" + $(thisLi).index();
        }
        $("#index").val(index);
        $("#menu-name").val(menuName);
        $(".operation_selected").removeClass("operation_selected");
        if(operationId != null) {
            $("#operation-"+operationId).addClass("operation_selected");
        }
        $("#info-panel").css("display","none");
        $("#menu-form").css("display","block");
    }

    function changeMenuList(obj) {
        var displayName;
        displayName = $("#menuList option:selected").text();
        $("#menu-name").val(displayName);
    }
    
    function save() {
        var menuJson = {"button":[]};
        //把菜单的li读取出来变成json数据。
        var firstLevelMenu = $("#menu-root>ul>li");
        for(var i=0; i<firstLevelMenu.length; i++) {
            var name = $(firstLevelMenu[i]).children("span").children("font").text();
            var operationId = $(firstLevelMenu[i]).attr("operationId");
            var myUrl = $(firstLevelMenu[i]).attr("myurl");
            var secondLevelMenu = $(firstLevelMenu[i]).children("ul").children("li");
            if(secondLevelMenu.length == 0) {
                //如果一级菜单没有子菜单
                var menu = {"name":name,"type":"view","operationId":operationId,"url":myUrl};
            } else {
                //一级菜单有子菜单
                var menu = {"name":name,"sub_button":[]};
            }
            menuJson.button.push(menu);
            for(var j=0; j<secondLevelMenu.length; j++) {
                var name = $(secondLevelMenu[j]).children("span").children("font").text();
                var operationId = $(secondLevelMenu[j]).attr("operationId");
                var myUrl = $(secondLevelMenu[j]).attr("myurl");
                var menu = {"name":name,"type":"view","operationId":operationId,"url":myUrl};
                menuJson.button[i].sub_button.push(menu);
            }
        }
        $.ajax({
            url: '<?php echo $control->getAjaxLinkUrl('saveMenu_1'); ?>',
            type: 'POST',
            data: menuJson,
            datatype: 'json',
            beforeSend: function() {
                $("#ajax-loaderdiv").show();
            },
            success: function(data) {
                //alert("保存成功！");
                jQuery("#<?php echo $control->getAjaxContainerId(); ?>").html(data);
            },
            complete: function() {
                $("#ajax-loaderdiv").hide();
            },
            error: function(data) {
                alert("There may a error on uploading. Try again later");
            },
            cache: false,
        });
    }
</script>
<style  type="text/css">
    .operation_area {
        min-height: 100px !important;
    }
    .tree {
        min-height:430px;
        /*    padding:19px;*/
        margin-bottom:20px;
        /* background-color:#fbfbfb; */
        /*        border:1px solid #999;*/
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        border-radius:4px;
        -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
        -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
        box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
    }
    .tree li {
        width:160px;
        list-style-type:none;
        margin:0;
        padding:10px 8px 0 4px;
        position:relative
    }
    .tree li::before, .tree li::after {
        content:'';
        left:-20px;
        position:absolute;
        right:auto
    }
    .tree li::before {
        border-left:1px solid #999;
        bottom:50px;
        height:100%;
        top:0;
        width:1px
    }
    .tree li::after {
        border-top:1px solid #999;
        height:20px;
        top:25px;
        width:25px
    }
    .tree li span {
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border:1px solid #999;
        border-radius:5px;
        display:inline-block;
        padding:3px 8px;
        text-decoration:none
    }
    .tree li.parent_li>span {
        cursor:pointer
    }
    .tree>ul>li::before, .tree>ul>li::after {
        border:0
    }
    .tree li:last-child::before {
        height:30px
    }
    .tree li.parent_li>span:hover {
        background:#eee;
        border:1px solid #94a0b4;
        color:#000
    }
    .OAuth {
        padding-top: 10px;padding-bottom: 15px;float: left;font-family: '微软雅黑', '黑体', '宋体';font-size: 18px;color: #666;
    }
    .oauthSpan{
        font-size: 12px;color: #999;padding-left: 10px;
    }
    .treeMenuEdit{
        width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
        background: url(<?php echo Yii::app()->request->baseUrl.'/images/bottom_menu.png';?>) no-repeat;
        background-position: -58px -11px;
    }
    .treeMenuDel{
        width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
        background: url(<?php echo Yii::app()->request->baseUrl.'/images/bottom_menu.png';?>) no-repeat;
        background-position: -35px -11px;
    }
    .treeMenuAdd{
        width: 18px;float: right;height: 18px;display: block;margin-left: 3px;
        background: url(<?php echo Yii::app()->request->baseUrl.'/images/bottom_menu.png';?>) no-repeat;
        background-position: -13px -11px;
    }
    .menuList{
        width:175px;
        margin:2px 0px 2px 100px;
    }
    .menu_url {
        display: block;
    }
    .operation_selected span {
        background-color: #0088CC;
        color: white;
    }
    .operation_name {
        display: none;
    }
</style>
<div >

    <div class="OAuth">自定义菜单授权
        <span class="oauthSpan">使用本模块，必须要在微信公众平台"开发模式"下使用自定义菜单，首先要在公众平台申请自定义菜单使用的AppId和AppSecret。</span>
    </div>
</div>
<div class="tree">
    <ul>
        <li class="menu" id="menu-root" style="width: 30%;float:left;">
            <strong><i class="icon-folder-open"></i> 菜单列表</strong> <a title="添加一级菜单" onclick="AddMenu(this.parentNode);" href="javascript:void(0);">
                <img width="20" height="20" alt="添加一级菜单" src="<?php echo Yii::app()->request->baseUrl.'/images/bottom_menu.jpg';?>">
            </a>
            <ul><?php 
                foreach ($firstLevelMenus as $firstLevelMenu) { 
                    $arr = explode('&%@', $firstLevelMenu->getValue());
                    $displayName = $arr[0];
//                    $displayName = $firstLevelMenu->getDisplayName();
                    $operationId = $arr[1];
                    $myUrl = $arr[2];
                    ?>
                    <li operationId="<?php echo $operationId;?>" myurl = "<?php echo $myUrl;?> class="parent_li">
                        <span onclick="collapse(this);" title="Collapse this branch"><i class="icon-minus-sign"></i> <font><?php echo $displayName;?></font></span>
                        <a class="treeMenuEdit"  href="javascript:void(0);" onclick="EditMenu(this.parentNode);" title="编辑"></a>
                        <a  class="treeMenuDel" href="javascript:void(0);" onclick="del(this.parentNode);" title="删除"></a>
                        <a  class="treeMenuAdd"  href="javascript:void(0);" onclick="AddMenu(this.parentNode);" title="添加"></a>
                        <ul><?php
                            $secondLevelMenus = $firstLevelMenu->getChildren();
                            foreach ($secondLevelMenus as $secondLevelMenu) {
                                $arr = explode('&%@', $secondLevelMenu->getValue());
                                $displayName = $arr[0];
//                                $displayName = $secondLevelMenu->getDisplayName();
                                $operationId = $arr[1];
                                $myUrl = $arr[2];
                                ?>
                                <li operationId="<?php echo $operationId;?>" myurl = "<?php echo $myUrl;?>">
                                    <span><i class="icon-leaf"></i> <font><?php echo $displayName;?></font></span>
                                    <a  class="treeMenuEdit" href="javascript:void(0);" onclick="EditMenu(this.parentNode);" title="编辑"></a>
                                    <a  class="treeMenuDel" href="javascript:void(0);" onclick="del(this.parentNode);" title="删除"></a>
                                </li><?php
                            }?> 
                        </ul>
                    </li><?php 
                }?>
            </ul>
        </li>
        <li class="panel" style="width: 60%;font-size: 10px;float:right">
            <div id="info-panel" style="display:none;">
                <h4 style="padding-left:25px;margin:0 0 10px 0">Show success Information.</h4>
            </div>
            <div id="menu-form" style="display:none;">
                <form class="form-horizontal">
                    <fieldset>
                        <div class="control-group">
                            <h4 style="padding-left:25px;margin:0 0 10px 0">添加菜单</h4>
                            <label class="control-label" for="input01" style="width: 100px;">菜单标题：</label>
                            <div class="controls" style="margin-left:10px;">                                
                                <input type="text" class="input-xlarge" id="menu-name" name="menu-name" style="width: 160px;" value="菜单标题">
                            </div>

                            <div class="help-block" style="margin-left: 30px;
                               width: 260px;">
                                注：一级菜单文字不超过4个汉字或8个字母，
                                二级菜单标题最多不得超过8个汉字或16个字母。
                                一级菜单个数范围：2-3个，二级菜单个数范围：2-5个，菜单最多支持两层。 
                            </div>
                                
                            <div class="tree operation_area">
                                <ul>
                                    <li id="operation-root" style="width: 30%;float:left;">
                                        <strong><i class="icon-folder-open"></i> 功能选择</strong>
                                        <ul><?php
                                            $apps = $activeSpace->getApps();
                                            $spaceId = Blyn::app()->getActiveSpace()->getId();
                                            foreach($apps as $app) {
                                                $appMenu = new BUIMenu($app);
                                                $opNodes = $appMenu->getChildren(FALSE,array('spaceId'=>$spaceId));
                                                if($opNodes != null) {?>
                                                <li id="operation-<?php echo $app->id;?>" class="parent_li">
                                                    <span onclick="collapse(this);" title="Collapse this branch"><i class="icon-minus-sign"></i> <font><?php echo $app->name;?></font></span>
                                                    <ul><?php
                                                        $appMenu = new BUIMenu($app);
                                                        $opNodes = $appMenu->getChildren(FALSE,array('spaceId'=>$spaceId));
                                                        foreach($opNodes as $opNode){
                                                            $firstLevelMenuList = $opNode->getChildren();
                                                            foreach ($firstLevelMenuList as $firstLevelMenu) {
                                                                $arr = explode('&%@', $firstLevelMenu->getValue());
                                                                $Val = $arr[0];
                                                                $Url= $arr[1];
                                                                ?>
                                                                <li id="operation-<?php echo $firstLevelMenu->getId();?>" url="<?php echo $Url;?>" class="operation">
                                                                    <span><i class="icon-leaf"></i> <font><?php echo $Val;?></font></span>
                                                                </li><?php
                                                            }
                                                        }?>
                                                    </ul>
                                                </li><?php
                                                }
                                            }?>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <br style="clear:both;">
                        </div>                    

                        <div class="form-actions" style="margin-left: 30px;width: 210px;padding-left: 90px;">
                            <input type="hidden" id="index" name="index" value="" />
                            <input type="button" class="btn btn-primary" onclick="sure();" value="确  定"  id="surebtn">
                            <input type="button" class="btn btn-primary" onclick="$('#menu-form').css('display','none');" value="取  消"  id="surebtn">
                        </div>
                    </fieldset>
                </form>
            </div>
        </li>
    </ul>
</div>
<hr style="clear:both;"/>
<a href="javascript:void(0);" class="btn btn-primary" onclick="save();">保存微信菜单</a>
<!--<a href="javascript:void(0);" class="btn btn-success">发布到微信</a>-->
    <?php echo $control->getAjaxLink(array('name' => '发布到微信', 'id' => 'releaseMenu'), array('htmlOptions' => array('class' => 'btn btn-success'))); ?>

<br/>
<br/>